<template>
    <div>
        <div class='nav'>
            <van-nav-bar title="话题列表" @click-left="onClickLeft">
                <van-icon name="arrow-left" slot="left" color='black' size='28px'/>
            </van-nav-bar>
        </div>
        <van-search placeholder="单行输入" input-align='center' />
        <div class='title'>
            <img src='https://img.yzcdn.cn/2.jpg' alt="">
            <div>
                <h3 class='hot'><a href="http://localhost:8080/#/hot">#文章介绍#</a></h3>
                <span>文章正文</span>
                <span>参与人数</span>
            </div>
        </div>
        <div class='title'>
            <img src='https://img.yzcdn.cn/2.jpg' alt="">
            <div>
                <h3 class='hot'><a href="http://localhost:8080/#/hot">#文章介绍#</a></h3>
                <span>文章正文</span>
                <span>参与人数</span>
            </div>
        </div>
        <div class='title'>
            <img src='https://img.yzcdn.cn/2.jpg' alt="">
            <div>
                <h3 class='hot'><a href="http://localhost:8080/#/hot">#文章介绍#</a></h3>
                <span>文章正文</span>
                <span>参与人数</span>
            </div>
        </div>
        <div class='title'>
            <img src='https://img.yzcdn.cn/2.jpg' alt="">
            <div>
                <h3 class='hot'><a href="http://localhost:8080/#/hot">#文章介绍#</a></h3>
                <span>文章正文</span>
                <span>参与人数</span>
            </div>
        </div>
        <div class='title'>
            <img src='https://img.yzcdn.cn/2.jpg' alt="">
            <div>
                <h3 class='hot'><a href="http://localhost:8080/#/hot">#文章介绍#</a></h3>
                <span>文章正文</span>
                <span>参与人数</span>
            </div>
        </div>
        <div class='title'>
            <img src='https://img.yzcdn.cn/2.jpg' alt="">
            <div>
                <h3 class='hot'><a href="http://localhost:8080/#/hot">#文章介绍#</a></h3>
                <span>文章正文</span>
                <span>参与人数</span>
            </div>
        </div>
        <div class='title'>
            <img src='https://img.yzcdn.cn/2.jpg' alt="">
            <div>
                <h3 class='hot'><a href="http://localhost:8080/#/hot">#文章介绍#</a></h3>
                <span>文章正文</span>
                <span>参与人数</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'Hti',
    data () {
        return {
            
        }
    },
    methods: {
        onClickLeft(){
            this.$router.go(-1)
        },
    }
}
</script>

<style scoped>
.nav{
     border-bottom:1px solid #ccc;
}
.title{
    width:345px;
    height: 90px;
    margin: 0 auto;
    margin-top: 10px;
    border-bottom:1px solid silver;
}
.title img{
    width:66px;
    height: 70px;
    float: left;
    margin-right: 20px;
}
.title H3{
    margin-bottom: 2PX ;
    font-size: 18px;
}
.title span{
    margin-bottom: 1PX ;
    font-size: 12px;
}
.title span:nth-child(2){
    display: block;
    margin-bottom: 1PX ;
    font-size: 12px;
}
.hot a{
    color:black;
}
</style>